<template>
  <a-tabs>
    <a-tab-pane key="1" :justify="true" :animation="true">
      <template #title>
        <icon-calendar/>
        Tab 1
      </template>
      <div class="body">
        <div class="item">
          <a-comment
              align="right"
              author="Balzac"
              avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
              content="A design is a plan or specification for the construction of an object
          or system or for the implementation of an activity or process, or the
          result of that plan or specification in the form of a prototype,
          product or process."
              datetime="1 hour"
          >
            <template #actions>
       <span class="action" key="heart" @click="onLikeChange">
        <span v-if="like">
          <IconHeartFill :style="{ color: '#f53f3f' }"/>
        </span>
        <span v-else>
          <IconHeart/>
        </span>
        {{ 83 + (like ? 1 : 0) }}
      </span>
              <span class="action" key="star" @click="onStarChange">
        <span v-if="star">
          <IconStarFill style="{ color: '#ffb400' }"/>
        </span>
        <span v-else>
          <IconStar/>
        </span>
        {{ 3 + (star ? 1 : 0) }}
      </span>

              <span class="action"> <IconMessage/> Reply </span>
            </template>
            <a-comment
                author="Balzac"
                avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp"
                content="Comment body content."
                datetime="1 hour"
            />
            <a-comment
                align="right"
                avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
            >
              <template #actions>
                <a-button key="0" type="secondary"> Cancel</a-button>
                <a-button key="1" type="primary"> Reply</a-button>
              </template>
              <template #content>
                <a-input placeholder="Here is you content."/>
              </template>
            </a-comment>
          </a-comment>
        </div>
        <div class="item">
          <a-comment
              align="right"
              author="Balzac"
              avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
              content="A design is a plan or specification for the construction of an object
          or system or for the implementation of an activity or process, or the
          result of that plan or specification in the form of a prototype,
          product or process."
              datetime="1 hour"
          >
            <template #actions>
       <span class="action" key="heart" @click="onLikeChange">
        <span v-if="like">
          <IconHeartFill :style="{ color: '#f53f3f' }"/>
        </span>
        <span v-else>
          <IconHeart/>
        </span>
        {{ 83 + (like ? 1 : 0) }}
      </span>
              <span class="action" key="star" @click="onStarChange">
        <span v-if="star">
          <IconStarFill style="{ color: '#ffb400' }"/>
        </span>
        <span v-else>
          <IconStar/>
        </span>
        {{ 3 + (star ? 1 : 0) }}
      </span>

              <span class="action"> <IconMessage/> Reply </span>
            </template>
            <a-comment
                author="Balzac"
                avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp"
                content="Comment body content."
                datetime="1 hour"
            />
            <a-comment
                align="right"
                avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
            >
              <template #actions>
                <a-button key="0" type="secondary"> Cancel</a-button>
                <a-button key="1" type="primary"> Reply</a-button>
              </template>
              <template #content>
                <a-input placeholder="Here is you content."/>
              </template>
            </a-comment>
          </a-comment>
        </div>
        <div class="item">
          <a-comment
              align="right"
              author="Balzac"
              avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
              content="A design is a plan or specification for the construction of an object
          or system or for the implementation of an activity or process, or the
          result of that plan or specification in the form of a prototype,
          product or process."
              datetime="1 hour"
          >
            <template #actions>
       <span class="action" key="heart" @click="onLikeChange">
        <span v-if="like">
          <IconHeartFill :style="{ color: '#f53f3f' }"/>
        </span>
        <span v-else>
          <IconHeart/>
        </span>
        {{ 83 + (like ? 1 : 0) }}
      </span>
              <span class="action" key="star" @click="onStarChange">
        <span v-if="star">
          <IconStarFill style="{ color: '#ffb400' }"/>
        </span>
        <span v-else>
          <IconStar/>
        </span>
        {{ 3 + (star ? 1 : 0) }}
      </span>

              <span class="action"> <IconMessage/> Reply </span>
            </template>
            <a-comment
                author="Balzac"
                avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp"
                content="Comment body content."
                datetime="1 hour"
            />
            <a-comment
                align="right"
                avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
            >
              <template #actions>
                <a-button key="0" type="secondary"> Cancel</a-button>
                <a-button key="1" type="primary"> Reply</a-button>
              </template>
              <template #content>
                <a-input placeholder="Here is you content."/>
              </template>
            </a-comment>
          </a-comment>
        </div>
        <div class="item">
          <a-comment
              align="right"
              author="Balzac"
              avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
              content="A design is a plan or specification for the construction of an object
          or system or for the implementation of an activity or process, or the
          result of that plan or specification in the form of a prototype,
          product or process."
              datetime="1 hour"
          >
            <template #actions>
       <span class="action" key="heart" @click="onLikeChange">
        <span v-if="like">
          <IconHeartFill :style="{ color: '#f53f3f' }"/>
        </span>
        <span v-else>
          <IconHeart/>
        </span>
        {{ 83 + (like ? 1 : 0) }}
      </span>
              <span class="action" key="star" @click="onStarChange">
        <span v-if="star">
          <IconStarFill style="{ color: '#ffb400' }"/>
        </span>
        <span v-else>
          <IconStar/>
        </span>
        {{ 3 + (star ? 1 : 0) }}
      </span>

              <span class="action"> <IconMessage/> Reply </span>
            </template>
            <a-comment
                author="Balzac"
                avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp"
                content="Comment body content."
                datetime="1 hour"
            />
            <a-comment
                align="right"
                avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
            >
              <template #actions>
                <a-button key="0" type="secondary"> Cancel</a-button>
                <a-button key="1" type="primary"> Reply</a-button>
              </template>
              <template #content>
                <a-input placeholder="Here is you content."/>
              </template>
            </a-comment>
          </a-comment>
        </div>
        <div class="btm"></div>
      </div>
    </a-tab-pane>
    <a-tab-pane key="2">
      <template #title>
        <icon-clock-circle/>
        Tab2
      </template>
      <div class="body">
        <div class="search">
          <a-cascader :options="options" v-model="value" :style="{width:'320px'}" placeholder="Please select ..."
                      multiple/>

        </div>
        <div class="item">
          <icon-user-group  style="font-size: 30px"/>
          <a-descriptions style="margin-top: 20px" :data="data" size="large" title="User Info" :column="1"/>
            <div class="bottom">
              <a-avatar-group :size="24">
      <a-avatar :style="{ backgroundColor: '#7BC616' }">A</a-avatar>
      <a-avatar :style="{ backgroundColor: '#14C9C9' }">B</a-avatar>
      <a-avatar :style="{ backgroundColor: '#168CFF' }">C</a-avatar>
      <a-avatar :style="{ backgroundColor: '#FF7D00' }">Arco</a-avatar>
      <a-avatar :style="{ backgroundColor: '#FFC72E' }">Design</a-avatar>
    </a-avatar-group>
            <a-button type="primary" :loading="loading2" @click="handleClick2">
      <template #icon>
        <icon-plus />
      </template>
      Click Me
    </a-button>
            </div>
        </div>
      </div>
    </a-tab-pane>

  </a-tabs>
</template>

<script>
import {ref} from 'vue';

export default {
  setup() {
    const value = ref(['datunli', 'wuhou']);
    const value2 = ref([['beijing', 'chaoyang', 'datunli'], ['sichuan', 'chengdu', 'wuhou']]);
    const fallback = (value) => {
      return value.map(item => item.toUpperCase()).join('-')
    }

    const options = [
      {
        value: 'beijing',
        label: 'Beijing',
        children: [
          {
            value: 'chaoyang',
            label: 'ChaoYang',
            children: [
              {
                value: 'datunli',
                label: 'Datunli',
              },
            ],
          },
          {
            value: 'haidian',
            label: 'Haidian',
          },
          {
            value: 'dongcheng',
            label: 'Dongcheng',
          },
          {
            value: 'xicheng',
            label: 'Xicheng',
            children: [
              {
                value: 'jinrongjie',
                label: 'Jinrongjie',
              },
              {
                value: 'tianqiao',
                label: 'Tianqiao',
              },
            ],
          },
        ],
      },
      {
        value: 'shanghai',
        label: 'Shanghai',
        children: [
          {
            value: 'huangpu',
            label: 'Huangpu',
          },
        ],
      },
    ];
    const data = [{
      label: 'Name',
      value: 'Socrates',
    }, {
      label: 'Mobile',
      value: '123-1234-1234',
    }, {
      label: 'Residence',
      value: 'Beijing'
    }, {
      label: 'Hometown',
      value: 'Beijing',
    }, {
      label: 'Address',
      value: 'Yingdu Building, Zhichun Road, Beijing'
    }];


    return {
      options,
      value,
      value2,
      fallback,
      data,

    }
  },
}
</script>
<style scoped lang="less">
.action {
  display: inline-block;
  padding: 0 4px;
  color: var(--color-text-1);
  line-height: 24px;
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.1s ease;
}

.action:hover {
  background: var(--color-fill-3);
}

.body {
  // width: 80%;
  height: 100vh;
  overflow-y: scroll;


  .item {
    width: 80%;
    margin: 20px auto;
    background-color: #ffffff;
    padding: 20px 10px;
  }

  .btm {
    height: 200px;
  }

}

.arco-tabs-pane {
  overflow-y: scroll;
  height: 100vh;
}

.search {
  width: 80%;
  text-align: center;
  background-color: #ffffff;
  height: auto;
  padding: 10px;
  margin: 10px auto;
}
.bottom{
  width: 90%;
  display: flex;
  justify-content: space-between;
  padding:10px;
}
</style>